<template>
    <span :class="sizeClass"></span>
</template>
<script type="es6">
    const sizePrefix = "icon-size-";
    export default{
        props:{
            size:{
                type:Number
            },
            icon:{
               type:String
            }
        },
        computed:{
            sizeClass () {
                return sizePrefix + this.size + ' ' + this.icon
            },

        }
    }

</script>
<style lang="less" rel="stylesheet/less" scoped>
    @import '../../../public/stylesheet/mixin.less';

        .icon-size-1 {
                display:inline-block;
                vertical-align:top;
                width: 12px;
                height: 12px;
                background-size: 12px 12px;
                &.decrease{
                    .bg-img('decrease_1')
                }
                &.discount{
                    .bg-img('discount_1')
                }
                &.guarantee{
                    .bg-img('guarantee_1')
                }
                &.invoice{
                    .bg-img('invoice_1')
                }
                &.special{
                    .bg-img('special_1')
                }
        }

    .icon-size-2 {
            display:inline-block;
            vertical-align:top;
            width: 16px;
            height: 16px;
            background-size: 16px 16px;
            &.decrease{
                .bg-img('decrease_2')
            }
            &.discount{
                .bg-img('discount_2')
            }
            &.guarantee{
                .bg-img('guarantee_2')
            }
            &.invoice{
                .bg-img('invoice_2')
            }
            &.special{
                .bg-img('special_2')
            }
    }

    .icon-size-3 {
            display:inline-block;
            vertical-align:top;
            width: 12px;
            height: 12px;
            background-size: 12px 12px;
            &.decrease{
                .bg-img('decrease_3')
            }
            &.discount{
                .bg-img('discount_3')
            }
            &.guarantee{
                .bg-img('guarantee_3')
            }
            &.invoice{
                .bg-img('invoice_3')
            }
            &.special{
                .bg-img('special_3')
            }
    }

    .icon-size-4 {
            display:inline-block;
            vertical-align:top;
            width: 16px;
            height: 16px;
            background-size: 16px 16px;
            &.decrease{
                .bg-img('decrease_4')
            }
            &.discount{
                .bg-img('discount_4')
            }
            &.guarantee{
                .bg-img('guarantee_4')
            }
            &.invoice{
                .bg-img('invoice_4')
            }
            &.special{
                .bg-img('special_4')
            }
    }
</style>